<script setup lang="ts">
import { ref } from 'vue';
import { Row, Col, Divider } from 'ant-design-vue';
import { enumChannelType, enumOrderStatusFn, enumCustomType } from '../index'

const props = defineProps<{
  exportTime?: string
  printYearMonthValue?: string
  fieldList?: {label: string; name: string, isSelect: boolean}[]
  tableData?: []
  houtelName: string
}>()

const state = ref({
  marginLeft5: {
    marginLeft: '5px',
  },
  boldBodyCol: {
    fontWeight: 'bold',
  },
})

const isBoldCol = (key: string | number) => {
  const findItem: any = props.fieldList?.find((item: any) => item.name === key);
  if (findItem && findItem.boldFont === 2) {
    return true
  } else {
    return false
  }
};


const transformData = (key, value) => {
  if(key === 'status') {
    return enumOrderStatusFn(value)
  }
  if(key === 'marketType') {
    return enumChannelType(value)
  }
  if(key === 'customerType') {
    return enumCustomType(value)
  }
  return value
}

const boldOnline = (obj) => {
  const { orderNumber } = obj || {}
  return orderNumber === '合计'
}
</script>

<template>
  <div class="-page">
    <main class="printWrapper">
      <header class="printHeader">
        <Row>
          <Col :span="6">
            <section class="printHotelName">{{ props?.houtelName }}</section>
          </Col>
          <Col :span="12">
            <section class="printTitle">订单明细表</section>
          </Col>
          <Col :span="6">
            <section class="printExportTime">
              导出时间:
              <span :style="state.marginLeft5" v-text="exportTime"></span>
            </section>
          </Col>
        </Row>
      </header>
      <Divider />
      <div class="print-title-box">
        <section class="printYearMonth">
          统计日期:<span :style="state.marginLeft5" v-text="printYearMonthValue"></span>
        </section>
      </div>
      <section>
        <table class="table">
          <thead>
            <tr class="tableHeadRow">
              <template v-for="item in fieldList" :key="item.name">
                <td v-if="item.isSelect" class="tableHeadCol" v-text="item.label"></td>
              </template>
            </tr>
          </thead>
          <tbody>
            <!-- 特殊行，日期是周五周六的背景色和上划线 -->
            <tr class="tableBodyRow" v-for="(objectItem, index) in tableData" :key="index">
              <td
                v-for="(value, key, itemNameIndex) in objectItem"
                :key="`${key}${index}${itemNameIndex}`"
                v-text="transformData(key, value)"
                :title="transformData(key, value)"
                :class="{'boldFont': isBoldCol(key), 'table-col-item': true, 'border-top-bottom': boldOnline(objectItem)}"
              >
              </td>
            </tr>
          </tbody>
          <!-- 若表格有合计，则渲染 -->
          <tfoot></tfoot>
        </table>
      </section>
    </main>
  </div>
</template>

<style lang="scss" scoped>
  @media screen {
    .printWrapper {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(219, 231, 238, 0.5);
      border-radius: 12px;
      padding: 20px;
      overflow: auto;
      height: 58vh;
    }
  }
  @media print {
    // 强制打印背景
    * {
      -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
      color-adjust: exact !important; /*Firefox*/
    }
    .printWrapper {
      overflow: visible;
    }
  }
  .printHeader {
    padding: 15px 30px;
  }
  .printHotelName {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 18px;
    font-weight: bold;
    color: rgb(37, 42, 65);
  }
  .printTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
    font-weight: bold;
    color: rgb(37, 42, 65);
  }
  .printExportTime {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 175px;
    height: 100%;
    font-size: 12px;
  }
  .print-title-box {
    display: flex;
    justify-content: space-between;
    .printYearMonth {
      font-size: 12px;
      margin-bottom: 10px;
    }
  }
  .table {
    width: 100%;
  }
  .tableHeadRow {
    text-align: center;
    background-color: rgb(239, 239, 239);
    font-size: 12px;
    line-height: 24px;
  }
  .tableHeadCol {
    padding: 10px 0;
  }
  .tableHeadCol:first-child {
    padding-left: 0px;
  }
  .tableBodyRow {
    text-align: center;
    border-bottom: 1px solid rgb(224, 225, 236);
    .table-col-item {
      max-width: 100px;
      word-wrap:break-word
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
  }
  .boldFont {
    font-weight: 700;
  }
  .border-top-bottom {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
</style>
